<template>
	<div class="content">
		<div class="title">
			<div class="title-text">
				我的荷花
				<span>{{ listData.myLotusCount || 0 }}</span>
				朵
			</div>
			<div class="title-date">
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" fields="month":start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">
							{{ date }}
							<uni-icons type="right" size="12" style="color: #b0b0b0"></uni-icons>
						</view>
					</picker>
				</view>
			</div>
		</div>
		<div class="list">
			<scroll-view scroll-y class="list-container" :scroll-top="scrollTop" @scrolltolower="loadMore">
				<div class="transaction-item" v-for="(item, index) in transaction" :key="index">
					<div class="transaction-info">
						<span v-if="item.financialType == 2">{{ financialTypeCode[item.financialType] || '' }} - 消费满{{ item.price || '' }}</span>
						<span v-else-if="item.financialType == 3">{{ financialTypeCode[item.financialType] || '' }} - {{ item.levelName || '' }}</span>
						<span v-else>{{ financialTypeCode[item.financialType] || '' }} - {{ item.relationUserName || '' }} ({{ item.relationUserMobile || '' }})</span>

						<div class="transaction-date">{{ item.dateTimeStr }}</div>
					</div>
					<div :class="item.expenseType == 1 ? 'transaction-amount' : 'transaction-amount2'">{{ item.expenseType == 1 ? '+' : '-' }}{{ item.amount || 0 }}</div>
				</div>
				<view class="loading-status">
					<template v-if="loading">
						<uni-load-more status="loading"></uni-load-more>
					</template>
					<template v-else-if="noMoreData">
						<text class="no-more">没有更多数据了</text>
					</template>
				</view>
			</scroll-view>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			date: currentDate,
			page: 1, // 当前页码
			pageSize: 12, // 每页条数
			loading: false, // 加载状态
			noMoreData: false, // 是否无更多数据
			scrollTop: 0, // 滚动位置,
			total: 0,
			listData: {},
			financialTypeCode: {
				1: '献礼',
				2: '收获',
				3: '赠送',
				4: '转账'
			},
			transaction: [
			]
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad() {
		this.initData();
	},
	methods: {
		// 初始化数据
		async initData() {
			try {
				this.loading = true;
				this.fetchData();
			} finally {
				this.loading = false;
			}
		},

		// 加载更多
		async loadMore() {
			if (this.loading || this.noMoreData) return;

			try {
				this.loading = true;
				this.page = this.page + 1;
				this.fetchData();
			} catch (e) {
			} finally {
				this.loading = false;
			}
		},

		// 请求数据（需替换为真实API）
		async fetchData() {
			const selectYear = this.date?.split('-')?.[0];
			const selectMonth = this.date?.split('-')?.[1];
			const data = {
				page: this.page,
				pageSize: 12,
				selectMonth: selectMonth,
				selectYear: selectYear
			};

			this.$post('/yahe/distributorLotus/detail', data, '1').then((res) => {
				if (res.success) {
					this.transaction = this.transaction.concat(res.content?.details?.records || []) || [];
					this.page = res.content?.details?.current;
					this.total = res.content?.details?.total;
					this.listData = {
						myLotusCount: res.content?.myLotusCount
					};
					this.checkNoMoreData(res);
				} else {
					this.$toast(res.message, 'none');
				}
			});
		},

		// 判断是否无更多数据
		checkNoMoreData(res) {
			const totalPages = Math.ceil(res.content?.details?.total / this.pageSize);
			this.noMoreData = this.page >= totalPages;
		},
		bindDateChange: function (e) {
			this.date = e.detail.value;
			this.page = 1;
			this.transaction = [];
			uni.showLoading({
				title: '加载中'
			});
			this.fetchData();
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			// let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			// day = day > 9 ? day : '0' + day;
			// return `${year}-${month}-${day}`;
			return `${year}-${month}`;
		}
	}
};
</script>

<style>
.content {
	box-sizing: border-box;
	height: 100%;
	background-color: #f5f5f5;
}

.title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	height: 88rpx;
	padding: 0rpx 20rpx;
}

.title-text {
	display: inline-block;
	padding: 28rpx 0rpx;
	margin-left: 14rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #6d6d6d;
}

.title-text span {
	margin: 0rpx 4rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 30rpx;
	color: #ff6737;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.title-date {
	display: inline-block;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
}

.list {
	margin: 20rpx 0;
	height: 90%;
}

.transaction-item {
	border-bottom: 0.5px solid #efefef;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.transaction-info {
	flex: 1;
}

.transaction-info span {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-size: 28rpx;
	color: #3a3a3a;
	text-align: left;
	font-style: normal;
	text-transform: none;
	padding: 10rpx 0rpx;
}

.transaction-amount {
	color: #ff6737;
	font-size: 30rpx;
}

.transaction-amount2 {
	color: #3a3a3a;
	font-size: 30rpx;
}

.transaction-date {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.uni-list-cell-db {
	display: block;
	border: 2rpx solid #d1d1d1;
	border-radius: 8rpx;
	padding: 8rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.uni-input {
	display: flex;
}
.loading-status {
	padding: 20rpx;
	text-align: center;
}

.no-more {
	color: #999;
	font-size: 24rpx;
}
.list-container {
	height: 100%;
}
</style>
